<template>
    <div>
      <Header></Header>
      <div class="partone">
        <div class="centerone" >
          <div class="mainpart">
            <div class="headerpart" >
              <nav>
                <span class="one"><font size="4.5" color="#333333">首页</font></span>
                <span class="one"><font size="4.5" color="#999999"> > </font></span>
                <span class="one"><font size="4.5" color="#999999">商城</font></span>
                <span class="one"><font size="4.5" color="#999999"> > </font></span>
                <span class="one"><font size="4.5" color="#999999">{{$route.params.figureName}}</font></span>
              </nav>
          </div>
            <br>
            <hr color="#eaeaea"  >

            <div class="mainpart02">
                  <div class="showproduct">
                    <img src="http://p1.meituan.net/movie/bc05cd577c936a237dc2b19f1987584e111405.jpg@750w_750h_2e" style="height: 438px ;width: 438px">
                  </div>

                  <div class="messageproduct">
                    <div class="finame">
                      <h1><span style="padding-top: 10px"><font size="6" color="black">{{$route.params.figureName}}</font></span></h1>
                    </div>

                    <div class="fiprice">
                      <span style="margin-left: 30px; color: #f03d37"><font size="8" >￥</font></span>
                      <span style="color: #f03d37"><font size="8">{{$route.params.figurePrice}}</font></span>
                    </div>

                    <div class="fisomedec">
                      <pre style="color: #999;"><font size="2">服务:   ·正版授权     《售后服务》</font></pre>
                      <br>
                      <pre style="color: #FAAF00; padding-top: 20px"><font size="2">说明：   该商品由第三方卖家提供</font></pre>
                    </div>

                    <div class="purchase-btn">立即抢购</div>
                  </div>
            </div>

            <div class="smallshowproduct">
              <img src="http://p1.meituan.net/movie/bc05cd577c936a237dc2b19f1987584e111405.jpg@750w_750h_2e" >
            </div>

            <div  class="mapwork">
              <div style="width: 1100px ; height: 70px"></div>

              <div class="mapworkbut">
                <div class="mapworkbutheader">
                  <span><font size="5">图文详情</font></span>
                  <span style="padding-left: 30px; color: #f03d37"> <font size="5">购买详情</font></span>
                  <hr style="height: 1px ;border: none; border-top: 1px ridge">
                </div>

                <div class="mapworkbutdetails">
                  <pre class="publicword">售后须知</pre>
                  <pre class="publicword02">上海习游文化传播有限公司</pre>
                  <br>
                  <pre class="publicword">商家QQ</pre>
                  <pre class="publicword02">123456789</pre>
                  <br>
                  <pre class="publicword">产品咨询</pre>
                  <pre class="publicword02">商家电话：202020123；联系时间：09:00-18:00</pre>
                  <br>
                  <pre class="publicword">配送范围</pre>
                  <pre class="publicword02">全国（除港澳台外）均可配送</pre>
                  <br>
                  <pre class="publicword">快递公司</pre>
                  <pre class="publicword02">本单使用东风快递（123-456-0270）</pre>
                  <br>
                  <pre class="publicword">配送费用</pre>
                  <pre class="publicword02">本单包邮，配送范围内无需再额外支付邮费</pre>
                  <br>
                  <pre class="publicword">配送时段</pre>
                  <pre class="publicword02">下单后 2-3 天</pre>
                  <br>
                  <pre class="publicword">售后保障</pre>
                  <pre class="publicword02">如需退换货，请进入我的订单</pre>
                </div>

              </div>

            </div>
<!--            <div class="testimg">-->
<!--              <div v-for="item in commaditList" :key="$route.params.figureId">-->
<!--                {{item.figurePrice}}-->
<!--                {{item.figureName}}-->
<!--                <img :src="item.figureImg" style="height: 50px; width: 50px">-->
<!--              </div>-->
<!--            </div>-->

          </div>
        </div>
      </div>


    </div>
</template>

<script>

  import axios from 'axios'
  import Header from '@/components/Header/Header'

    export default {
        name: "CommaditDetail",
      data() {
        return {
          commaditList:[]
        }
      },

      // mounted() {
      //   axios.get('/api/CommaditList.json')
      //     .then((response) => {
      //
      //       console.log("调用api")
      //
      //       console.log(response.data);
      //
      //       const data = response.data;
      //       this.commaditList = data;
      //
      //     })
      //     .catch(function (error) {
      //       console.log(error);
      //     });
      // },
      components: {
          Header
      }
    }
</script>

<style scoped>
  .partone{
    width: 1200px;
    margin: 0 auto;
  }
   .centerone{
     width: 1200px;
     margin: 0 auto;
     height: 1250px;
   }
    .mainpart{
      width: 1100px;
      height: 1250px;
      padding: 60px 0px 0px 100px;

    }
    .mainpart02{
      top: 0px;
      width: 1100px;
      margin: 0;
      height: 480px;
    }
  .smallshowproduct{
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .smallshowproduct img{
      width: 100%;
    }
   .mapwork{
     width: 1100px;
     height: 600px;
   }
    .mapworkbut{
      width: 1100px;
      height: 255px;
  }
    .mapworkbutheader{
      width: 1100px;
      height: 60px;
      display: inline-block;
      margin: 0 32px 0 0;
      padding: 0px 16px;
      cursor: pointer;
    }
    .mapworkbutdetails{
      width: 1100px;
      height: 500px;
      background-color: white;
      padding: 0px 16px
    }
      .publicword{
        color: #333;
        font-weight: 700;
        padding-bottom: 5px;
      }
      .publicword02{
        color: #666;
      }
    .showproduct{
      top: -15px;
      display: inline-block;
      float: left;
      width: 460px;
      height: 440px;
      margin: 30px 20px 20px 0px;
    }
    .messageproduct{
      display: inline-block;
      float: left;
      width: 612px;
      height: 460px;
      margin: 30px 0px 30px 0px;
    }
      .finame{
        width: 550px;
        height: 50px;;
        padding-top: 20px;
        padding-bottom: 10px;

      }
      .fiprice{
        width: 550px;
        height: 80px;;
        background-color: #eaeaea;
        padding-top: 20px;
      }
      .fisomedec{
        width: 550px;
        height: 120px;
        padding-top: 35px;
      }
      .purchase-btn{
        width: 200px;
        height: 60px;
        background-color: #f03d37;
        border-radius: 30px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
      }

</style>
